<template>
  <div class="real-hidden-sort">
    <div class="title"></div>
    <div class="data"></div>

    <div class="tab-box">
      <ComRadioTabA :tab="currentTab" :tab-list="tabList" @change="changeTime" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineComponent, ref } from 'vue';
import ComRadioTabA from '@/components/tabComp/ComRadioTabA.vue';

const currentTab = ref('1');

const tabList = [
  { name: '1', label: '倒序' },
  { name: '2', label: '正序' },
];

function changeTime(val: string) {
  currentTab.value = val;
}

defineComponent({ name: 'RealHiddenSort' });
</script>

<style scoped lang="scss">
.real-hidden-sort {
  @apply relative w-full h-[304px] mt-[35px] flex flex-col justify-between;

  .title {
    @apply w-full h-[57px];
    background: url('./assets/title.png') no-repeat center;
  }

  .data {
    @apply w-full h-[236px];
    background: url('./assets/data-bg.png') no-repeat center;
  }

  .tab-box {
    @apply absolute right-0 top-[6px];
  }
}
</style>
